<template>
  <div class="table-container">
    <table
      style="overflow: auto; padding-bottom: 20px"
      border="none"
      class="min-w-full divide-y divide-gray-200 shadow-md rounded-md"
    >
      <thead class="bg-gray-50">
        <tr style="background-color: white">
          <td
            style="
              font-size: 12px;
              padding: 10px;
              font-weight: bold;
              background-color: white;
              color: black !important;
            "
          ></td>
          <td v-if="arr2.length > 0"></td>
          <td
            v-for="(col, index) in tableHeaders"
            :key="index"
            style="
              font-size: 12px;
              padding: 10px;
              font-weight: bold;
              background-color: white;
              color: black !important;
              border-right: unset !important;
            "
            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            {{ col }}
          </td>
        </tr>
      </thead>

      <tbody class="bg-white divide-y divide-gray-200">
        <tr v-for="(row, rowIndex) in tableRows" :key="rowIndex">
          <td
            rowspan="2"
            style="
              font-weight: bold;
              border-left: 1px solid #e2e8f0;
              border-right: 1px solid #e2e8f0;
            "
            v-if="arr2.length > 0 && rowIndex % 2 == 0"
          >
            {{ arr2[rowIndex] }}
          </td>
          <td style="font-weight: bold">
            {{ rowIndex % 2 == 0 ? 'Cell Percentage' : 'Expression Mean' }}
          </td>
          <td v-for="(cell, cellIndex) in row" :key="cellIndex" class="px-6 py-4 whitespace-nowrap">
            {{ formatNumber(cell) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, defineExpose } from 'vue'

const formatNumber = (num) => {
  if (typeof num!== 'number') return num;
  const numStr = num.toString();
  const decimalIndex = numStr.indexOf('.');
  if (decimalIndex === -1) return num;
  return numStr.slice(0, decimalIndex + 7); // 截取小数点后 6 位
}

const props = defineProps({
  graphDataList: {
    type: Array,
    default: () => [],
  },
})

const tableHeaders = ref([])
const tableRows = ref([])
var arr2 = ref([])

function childMethod(data) {
  arr2.value = []

  if (data) {
    if (props.graphDataList != null) {
      if (data.cell_names && data.cell_names.length > 0) {
        tableHeaders.value = props.graphDataList[0]
        tableRows.value = props.graphDataList.slice(1)
        var arr = data.cell_names.split(',')

        arr.forEach((obj) => {
          arr2.value.push(obj)
          arr2.value.push(obj)
        })
      } else {
        tableHeaders.value = props.graphDataList[0]
        tableRows.value = props.graphDataList.slice(1)
      }
    } else {
      tableHeaders.value = []
      tableRows.value = []
    }
  }
}
// 向父组件暴露方法
defineExpose({
  childMethod,
})

onMounted(() => {
  childMethod()
})
</script>

<style scoped>

tbody tr:nth-child(4n + 3),
    tbody tr:nth-child(4n + 4) {
      background-color: #fafafa;
    }
    
td[data-v-3b410412] {
  padding: 15px;
}
td:last-of-type {
  border-right: 1px solid #e2e8f0;
}
.table-container {
  /* width: 690px !important; */
  overflow-x: auto;
  /* -webkit-overflow-scrolling: touch; */
}
/* 为表格添加样式，合并边框 */
.table-container table {
  /* border-collapse: collapse; */
}
/* 为表格的表头和单元格添加样式，设置边框和内边距 */

body {
  font-family: 'Inter', sans-serif;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
table,
tr,
td {
  border: none;
}
#app {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 20px;
  width: 100%;
}

table {
  width: 100%;
  /* border-collapse: collapse; */
  transition: all 0.3s ease;
  border: none !important;
}

th,
td {
  padding: 12px 15px;
  text-align: center;
}

th {
  background-color: #edf2f7;
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap !important;
}
tr {
  height: 60px;
  border: 1px solid #e2e8f0 !important;
}
tr:nth-child(even) {
  /* background-color: #fafafa; */
}
td {
  color: #2d3748;
  white-space: nowrap !important;
}

td {
  padding: 6px 0;
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.3s ease;
}

td :last-child {
  border-bottom: none;
}

td div:hover {
  background-color: #f7fafc;
}
</style>
